{% extends 'base/base.html' %}

{% block title %}{{ title }} - {{ project.name }} - 多用户报警系统{% endblock %}

{% block content %}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>
            <i class="fa fa-plug" aria-hidden="true"></i> {{ title }} - {{ project.name }}
        </h1>
        <a href="{% url 'projects:project_webhooks' project.id %}" class="btn btn-secondary">
            <i class="fa fa-arrow-left" aria-hidden="true"></i> 返回列表
        </a>
    </div>
    
    <div class="card">
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                
                <!-- Webhook名称 -->
                <div class="form-group mb-4">
                    <label for="id_name" class="form-label">{{ form.name.label }} <span class="text-danger">*</span></label>
                    {{ form.name }}
                    {% if form.name.errors %}
                        <div class="text-danger mt-1">
                            {{ form.name.errors }}
                        </div>
                    {% else %}
                        <small class="form-text text-muted">{{ form.name.help_text }}</small>
                    {% endif %}
                </div>
                
                <!-- Webhook URL -->
                <div class="form-group mb-4">
                    <label for="id_url" class="form-label">{{ form.url.label }} <span class="text-danger">*</span></label>
                    <div class="input-group">
                        {{ form.url }}
                        {% if form.url.field.widget.attrs.data_generate_url == 'true' %}
                            <button type="button" id="refresh-url-btn" class="btn btn-outline-secondary" title="重新生成URL">
                                <i class="fa fa-refresh" aria-hidden="true"></i>
                            </button>
                        {% endif %}
                    </div>
                    {% if form.url.errors %}
                        <div class="text-danger mt-1">
                            {{ form.url.errors }}
                        </div>
                    {% else %}
                        <small class="form-text text-muted">{{ form.url.help_text }}</small>
                    {% endif %}
                </div>
                
                <!-- 渠道 -->
                <div class="form-group mb-4">
                    <label for="id_channel" class="form-label">{{ form.channel.label }} <span class="text-danger">*</span></label>
                    {{ form.channel }}
                    {% if form.channel.errors %}
                        <div class="text-danger mt-1">
                            {{ form.channel.errors }}
                        </div>
                    {% else %}
                        <small class="form-text text-muted">{{ form.channel.help_text }}</small>
                    {% endif %}
                </div>
                
                <!-- 签名密钥 -->
                <div class="form-group mb-4">
                    <label for="id_secret" class="form-label">{{ form.secret.label }}</label>
                    {{ form.secret }}
                    {% if form.secret.errors %}
                        <div class="text-danger mt-1">
                            {{ form.secret.errors }}
                        </div>
                    {% else %}
                        <small class="form-text text-muted">{{ form.secret.help_text }}</small>
                    {% endif %}
                </div>
                
                <!-- 触发事件 -->
                <div class="form-group mb-4">
                    <label class="form-label">{{ form.events.label }} <span class="text-danger">*</span></label>
                    <div class="form-check-group">
                        {% for choice in form.events.field.choices %}
                            <div class="form-check form-check-inline">
                                <input 
                                    type="checkbox" 
                                    class="form-check-input" 
                                    id="id_events_{{ forloop.counter0 }}" 
                                    name="events" 
                                    value="{{ choice.0 }}"
                                    {% if choice.0 in form.events.value or choice.0 in form.initial.events %}checked{% endif %}
                                >
                                <label class="form-check-label" for="id_events_{{ forloop.counter0 }}">{{ choice.1 }}</label>
                            </div>
                        {% endfor %}
                    </div>
                    {% if form.events.errors %}
                        <div class="text-danger mt-1">
                            {{ form.events.errors }}
                        </div>
                    {% else %}
                        <small class="form-text text-muted">{{ form.events.help_text }}</small>
                    {% endif %}
                </div>
                
                <!-- 是否激活 -->
                <div class="form-group mb-6">
                    <div class="form-check">
                        {{ form.is_active }}
                        <label class="form-check-label" for="id_is_active">{{ form.is_active.label }}</label>
                    </div>
                    {% if form.is_active.errors %}
                        <div class="text-danger mt-1">
                            {{ form.is_active.errors }}
                        </div>
                    {% else %}
                        <small class="form-text text-muted">{{ form.is_active.help_text }}</small>
                    {% endif %}
                </div>
                
                <!-- 表单操作按钮 -->
                <div class="form-actions d-flex justify-content-end">
                    <a href="{% url 'projects:project_webhooks' project.id %}" class="btn btn-secondary mr-2">
                        取消
                    </a>
                    <button type="submit" class="btn btn-primary">
                        {% if webhook %}
                            <i class="fa fa-save" aria-hidden="true"></i> 保存修改
                        {% else %}
                            <i class="fa fa-plus" aria-hidden="true"></i> 添加Webhook
                        {% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 添加表单元素焦点效果
        const formInputs = document.querySelectorAll('input[type="text"], input[type="url"], textarea, select');
        formInputs.forEach(input => {
            input.style.transition = 'border-color 0.2s ease';
            input.addEventListener('focus', function() {
                this.classList.add('border-primary');
                this.classList.add('shadow-sm');
            });
            input.addEventListener('blur', function() {
                this.classList.remove('border-primary');
                this.classList.remove('shadow-sm');
            });
        });
        
        // 为复选框添加交互效果
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.style.transition = 'transform 0.1s ease';
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    this.parentElement.classList.add('border-primary');
                } else {
                    this.parentElement.classList.remove('border-primary');
                }
            });
        });
        
        // 为按钮添加悬停效果
        const buttons = document.querySelectorAll('button[type="submit"], .btn');
        buttons.forEach(button => {
            button.style.transition = 'transform 0.1s ease';
            button.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-1px)';
            });
            button.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
        
        // 实现URL刷新功能
        const refreshUrlBtn = document.getElementById('refresh-url-btn');
        const urlInput = document.getElementById('id_url');
        
        if (refreshUrlBtn && urlInput) {
            refreshUrlBtn.addEventListener('click', function() {
                // 添加旋转动画效果
                this.querySelector('i').style.transition = 'transform 0.5s ease';
                this.querySelector('i').style.transform = 'rotate(180deg)';
                
                // 获取项目信息
                const projectName = '{{ project.name|escapejs }}'.toLowerCase().replace(/\s+/g, '-').substring(0, 20);
                
                // 生成新的随机ID (在前端模拟生成，与后端逻辑保持一致)
                const generateShortUuid = function() {
                    return 'xxxxxxxxxxxx'.replace(/[x]/g, function(c) {
                        const r = Math.random() * 16 | 0;
                        return r.toString(16);
                    });
                };
                
                const webhookId = generateShortUuid();
                
                // 构建新的URL
                const baseUrl = 'https://webhook.example.com';
                const newUrl = `${baseUrl}/api/webhooks/${projectName}/${webhookId}/receive`;
                
                // 更新URL输入框的值
                urlInput.value = newUrl;
                
                // 添加输入框高亮效果
                urlInput.classList.add('border-success');
                setTimeout(function() {
                    urlInput.classList.remove('border-success');
                }, 1000);
                
                // 重置旋转动画
                setTimeout(() => {
                    this.querySelector('i').style.transform = 'rotate(0deg)';
                }, 500);
            });
        }
    });
</script>
{% endblock %}